<template>
  <PageContainer>
    <view class="container">
      <Header title="答疑详情">
        <template>
          <view class="pa-16">
            <view class="fz-16 default-color font-bold mb-12"><text>关联供需</text></view>
            <view
              class="pa-12 disFlxAC br-8"
              style="background-color: #f2f3f5"
              @click="toSupplyDemandDetails"
            >
              <TImage
                v-if="routeOptions?.data.boType === BoTypeEnum.Supply"
                class="flex-shrink-0 mr-4"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
                width="40rpx"
                height="40rpx"
              />
              <TImage
                v-else
                class="flex-shrink-0 mr-4"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
                width="40rpx"
                height="40rpx"
              />
              <text class="fz-14 default-color flex-1 ov-1">{{ routeOptions?.data.title }}</text>
              <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
            </view>
          </view>
        </template>
      </Header>
      <view class="bg-white pa-16 mt-12">
        <view class="fz-16 default-color font-bold mb-12"><text>答疑详情</text></view>
        <AnsweringQuestionsItem :data="routeOptions?.data" />
      </view>
      <template v-if="routeOptions?.type === 'received'">
        <TButtonGroup show-background>
          <TButton
            :icon="'\ue673'"
            :text="routeOptions.data.isTop ? '取消置顶' : '置顶展示'"
            class="gutter-btn"
            :customStyle="{
              border: '2rpx solid #CCCCC8',
            }"
            custom-class="h-32 linh-32 br-16"
            @click="handleChangeTop"
          />
          <TButton
            :icon="routeOptions.data.isShow ? '\ue6d2' : '\ue6cf'"
            :text="routeOptions.data.isShow ? '取消公开' : '公开答疑'"
            class="gutter-btn"
            :customStyle="{
              border: '2rpx solid #CCCCC8',
            }"
            custom-class="h-32 linh-32 br-16"
            @click="handleChangePublic"
          />
          <!-- 回复 / 修改回复 -->
          <TButton
            :icon="'\ue687'"
            :text="routeOptions.data.replyContent ? '修改回复' : '回复'"
            type="primary"
            class="gutter-btn"
            custom-class="h-32 linh-32 br-16"
            @click="handleShowTextarea"
          />
        </TButtonGroup>
      </template>
      <view
        class="textarea-view disFlxAC"
        :style="{
          bottom: boardHeight + 'px',
          zIndex: textareaFocus ? 99 : 0,
          opacity: textareaFocus ? 1 : 0,
        }"
      >
        <textarea
          v-model="textareaVal"
          class="textarea pa-8 br-8 mr-16"
          placeholder="请输入"
          :focus="textareaFocus"
          :fixed="true"
          :show-confirm-bar="false"
          placeholder-style="color: #969799; font-size: 28rpx"
          :maxlength="100"
          :auto-height="true"
          :auto-focus="routeOptions?.autoFocus"
          :adjust-position="false"
          :confirm-type="('return' as any)"
          @blur="textareaFocus = false"
        ></textarea>
        <TButton
          text="提交"
          type="primary"
          custom-class="h-32 linh-32 br-8"
          @click="handleQuestionReply"
        />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* questionDetails 答疑详情 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import type { QuestionDetails } from '@/router/types/modules';
  import AnsweringQuestionsItem from '../../components/AnsweringQuestionsItem/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { nextTick, ref } from 'vue';
  import { questionReply, questionShow, questionTop } from '@/api/businessOpportunities';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';
  import { Toast } from '@/utils';
import { UniEmitNameEnum } from '@/enums/uniEmitEnum';

  const textareaVal = ref<string>('');
  const defaultBottom = 15;
  const boardHeight = ref(defaultBottom);
  const textareaFocus = ref(false);

  const routeOptions = ref<QuestionDetails>();
  onLoad<'questionDetails'>((op) => {
    routeOptions.value = op;
    if (op.type === 'received') {
      op.autoFocus && handleShowTextarea();
      uni.onKeyboardHeightChange((res) => {
        nextTick(() => {
          textareaFocus.value = !!res.height;
        });
        boardHeight.value = res.height || defaultBottom;
      });
    }
  });

  /** 是否置顶 */
  function handleChangeTop() {
    const data = routeOptions.value?.data;
    if (data) {
      const state = data.isTop ? PublicBooleanEnum.NO : PublicBooleanEnum.YES;
      questionTop({
        id: data.id,
        state,
      }).then(() => {
        routeOptions.value!.data.isTop = state;
        Toast(state === PublicBooleanEnum.YES ? '本答疑已置顶' : '本答疑已取消置顶');
      });
    }
  }
  /** 是否公开 */
  function handleChangePublic() {
    const data = routeOptions.value?.data;
    if (data) {
      const state = data.isShow ? PublicBooleanEnum.NO : PublicBooleanEnum.YES;
      questionShow({
        id: data.id,
        state,
      }).then(() => {
        routeOptions.value!.data.isShow = state;
        Toast(
          state === PublicBooleanEnum.YES
            ? '本答疑已公开给所有人看'
            : '本答疑已取消公开，供需详情不显示',
        );
      });
    }
  }

  function handleShowTextarea() {
    if (routeOptions.value?.data.replyContent) {
      textareaVal.value = routeOptions.value.data.replyContent;
    }
    nextTick(() => (textareaFocus.value = true));
  }

  /** 回复答疑 */
  function handleQuestionReply(e?: { detail: { value: string } }) {
    const value = e?.detail.value || textareaVal.value;
    if (!value) {
      Toast('请填写内容');
      return;
    }
  const data = routeOptions.value?.data;
    if (data) {
      questionReply({ id: data.id, content: value }).then((res) => {
        routeOptions.value!.data.replyContent = value;
        routeOptions.value!.data.replyTime = res.updateTime;
        textareaVal.value = '';
        textareaFocus.value = false;
        Toast('回复成功');
        uni.$emit(UniEmitNameEnum.REFRESHPREVIOUSPAGE);
      });
    }
  }

  function toSupplyDemandDetails() {
    navigateTo({
      name: 'supplyDemandDetails',
      options: { id: routeOptions.value?.data.boInfoId! },
    });
  }
</script>

<style lang="scss" scoped>
  .textarea-view {
    position: fixed;
    left: 0;
    bottom: 372px;
    width: calc(100% - 64rpx);
    padding: 16rpx 32rpx;
    display: flex;
    background-color: #f2f3f5;
    z-index: 99;
    min-height: 88rpx;
    .textarea {
      flex: 1;
      // margin: 16rpx 0;
      max-height: 300rpx;
      background-color: #fff;
      color: #333;
    }
  }
</style>
